import React from 'react';
import { observer, inject } from 'mobx-react';
import MainLayout from '../layout/MainLayout';
import ReqIntervention from './Intervention';
import FreeWorkflowSimple from './freeWorkflowSimple';
import LogList from '../../asyncComps/LogList';
import FormSignInput from '../../asyncComps/FormSignInput';
import RemindTypelist  from '../../asyncComps/RemindTypelist';
import { getLabel } from '../../util/convert';
import * as DetailUtil from '../../util/public/detailUtil';
import FreeWorkflowNew from './FreeWorkflowNew'

@inject('globalStore','layoutStore')
@observer
export default class FormContent extends React.Component{
    componentDidMount() {
        const { jumpTab, urlParams } = this.props.globalStore;
        jumpTab(urlParams);
        this.onIframeHover();

        const { JSComplete, commonParam} = this.props.globalStore;
        const { intervenorright_dev} = commonParam;
        JSComplete && intervenorright_dev > 0 && WfForm.rightBtn.doIntervenorDialog(true);
    }
    doScrollYEvent = () => {
        if(this.scrollEventFn)
            window.clearTimeout(this.scrollEventFn);
        this.scrollEventFn = window.setTimeout(() =>{
            window.formImgLazyLoad(jQuery('.wf-req-form-scroll'));        //图片懒加载
            DetailUtil.fixedDetailHead(jQuery(this));   //明细表头固定
            window.WfForm.triggerScrollEvent();
        }, 30);
    }
    renderMain(){
        const { globalStore, layoutStore } = this.props;
        const { JSComplete, commonParam, rightMenu, variableMap, markInfo, controlVariableMap, remindInfo, setTabKey} = globalStore;
        const { containSignInput,propFileCfg } = layoutStore;
        const { requestid, requestType, isHideArea, intervenorright, margin, showDefaultSign,showDefaultLogList,showFreeWfSimpleCom,isviewonly } = commonParam;
        const { forward,szssz01={} } = rightMenu;
        const {isShow=0} = szssz01;
        return (
            <div className="wf-req-form-scroll" onScroll={this.doScrollYEvent}>
                <div className="wf-req-form-main">
                    { <RemindTypelist ecId={`${this && this.props && this.props.ecId || ''}_RemindTypelist@cifq6n`} {...mobx.toJS(remindInfo)} callbackFun={(v)=>{
                        globalStore.changeSubmitParam({remindTypes:v});
                        globalStore.updateRemindInfo({...mobx.toJS(remindInfo),...{value:v}});
                    }}/>}
                    <div className='wf-req-form-wrapper' style={{margin: margin}}>
                      {JSComplete && isShow==1 && <FreeWorkflowNew/>}
                        <div className='wf-req-form' style={{ margin: "0 auto", marginBottom: '20px' }}>
                            {/* <form name="frmmain" onKeyDown={this.formDoKeyDown}> */}
                                <MainLayout ecId={`${this && this.props && this.props.ecId || ''}_MainLayout@kdmfyn`} symbol="main" />
                            {/* </form> */}
                        </div>
                        {
                            false && JSComplete && intervenorright > 0 && <ReqIntervention ecId={`${this && this.props && this.props.ecId || ''}_ReqIntervention@xwzzmi`} />
                        }
                        {
                            JSComplete && showFreeWfSimpleCom == 1 && <FreeWorkflowSimple ecId={`${this && this.props && this.props.ecId || ''}_FreeWorkflowSimple@ijveh0`} />
                        }
                        <div className='wf-req-signinput'>
                            {
                                showDefaultSign === "1" && ((!containSignInput && requestType > 0) || intervenorright > 0)
                                && markInfo && markInfo['hasLoadMarkInfo'] && <FormSignInput ecId={`${this && this.props && this.props.ecId || ''}_FormSignInput@l68rdx`} isInForm={false} />
                            }
                        </div>
                        <div className='wf-req-loglist'>
                            {
                                showDefaultLogList === "1" && requestType != 2 && isHideArea != "1" &&
                                <LogList ecId={`${this && this.props && this.props.ecId || ''}_LogList@uegmgi`}  commonParam={commonParam} setTabKey={setTabKey} forward={forward} 
                                    controlVariableMap={controlVariableMap} variableMap={variableMap} isRelaodLogList={variableMap.get('isRelaodLogList')} 
                                    reloadLogListParams={variableMap.get('reloadLogListParams')} />
                            }
                        </div>
                        {
                            window.location.pathname.indexOf('/spa/workflow/') > -1 && propFileCfg.show_duration_log === "1" &&
                            <div className='test-page-load-duration'>
                                <span className='test-page-load-duration-total'>{getLabel('527647', '首屏加载总耗时:')}
                                <span style={{ fontWeight: 800 }}>{window.REQ_LOAD_DURATION / 1000 || 0}</span> {getLabel(527648 ,'秒')}
                                    <div className='test-page-load-duration-detail'>
                                        <p>{getLabel(21586, '请求id')}: {requestid}</p>
                                        <p>{getLabel(386155, 'js加载耗时')}: {window.JS_LOAD_DURATION || 0} {getLabel(26287, '毫秒')}</p>
                                        <p>{getLabel(386156, '中转耗时')}: {window.Route_DURATION || 0} {getLabel(26287, '毫秒')}</p>
                                        <p>{getLabel(386157, '异步js耗时')}: {window.ASYNC_DURATION || 0} {getLabel(26287, '毫秒')}</p>
                                        <p>{getLabel(386158, '服务端耗时')}: {window.SERVER_DURATION || 0} {getLabel(26287, '毫秒')}</p>
                                        <p>{getLabel(386159, '接口耗时')}: {window.API_DURATION || 0} {getLabel(26287, '毫秒')}</p>
                                        <p>{getLabel(386160, '渲染耗时')}: {window.DISPATCH_DURATION || 0} {getLabel(26287, '毫秒')}</p>
                                    </div>
                                </span>
                            </div>
                        }
                    </div>
                </div>
            </div>
        )
    }
    renderOdoc(iframeSrc){
        return (
            <div className="wf-req-form-odoc">
                <iframe className='wf-req-form-odoc-iframe' src={iframeSrc} style={{ border: 0, width: '100%', height: '100%' }} ></iframe>
            </div>
        )
    }
    render(){
        const { globalStore,layoutStore } = this.props;
        const { tabKey,commonParam } = globalStore;
        const { odocInfo,mainData } = layoutStore;
        let arr = [];
        if(odocInfo.docFlag && odocInfo.docFieldId){    //一文双屏
            const { docFieldId,docParam,srcUrl } = odocInfo;
            const { isColumnShow,documentTextPosition,documentTextProportion } = docParam;
            const docFieldInitValue = mainData.get(`field${docFieldId}`) && mainData.get(`field${docFieldId}`).variable.get("initValue");
            const {authStr="", authSignatureStr=""}=commonParam;
            const doc_srcUrl = srcUrl + "&authStr=" + authStr + "&authSignatureStr=" + authSignatureStr;
            if(isColumnShow === "1" && !!docFieldInitValue){
                const oDocLeft = documentTextPosition == "l";
                let mainStyle = {width:`${100-documentTextProportion}%`, height:"100%"};
                let odocStyle = {width:`${documentTextProportion}%`, height:"100%"};
                odocStyle[`border-${oDocLeft ? "right" : "left"}`] = "1px #989A9C solid";
                odocStyle.float = oDocLeft ? "left" : "right";
                mainStyle.float = oDocLeft ? "right" : "left";
                arr.push(
                    <div style={mainStyle} className={`wf-req-form-${mainStyle.float}`}>
                        <div className={`wf-req-form-${mainStyle.float}-shrink`} onClick={e=>{this.shrink(e,mainStyle.float)}}></div>
                        {this.renderMain()}
                    </div>
                    );
                arr.push(
                    <div style={odocStyle} className={`wf-req-form-${odocStyle.float}`}>
                        <div className={`wf-req-form-${odocStyle.float}-shrink`} onClick={e=>{this.shrink(e,odocStyle.float)}}></div>
                        {this.renderOdoc(doc_srcUrl)}
                    </div>
                    );
            }
        }
        if(arr.length == 0)
            arr.push(this.renderMain());
        
        return (
            <div className="wf-req-form-content" style={{display: tabKey === 'form' ? 'block' : 'none'}}>{arr}</div>
        )
    }
    shrink = (e,float) =>{
        const brother = float === "left" ? "right" : "left";
        const { layoutStore } = this.props;
        const { odocInfo } = layoutStore;
        const { docParam } = odocInfo;
        const { documentTextPosition,documentTextProportion } = docParam;
        const docIsInNowDom = documentTextPosition == float.substring(0,1);
        const nowDom = e.target.parentNode;
        const brotherDom = document.querySelector(".wf-req-form-"+brother)

        if(nowDom.style.width == "100%"){
            nowDom.style.width = docIsInNowDom ? documentTextProportion + "%" : (100 - documentTextProportion) + "%";
            brotherDom.style.width = docIsInNowDom ? (100 - documentTextProportion) + "%" : documentTextProportion + "%" ;
        }else{
            nowDom.style.width="0px";
            brotherDom.style.width="100%";
        }
    }

    onIframeHover=()=>{
        if(document.querySelector(".wf-req-form-left") && document.querySelector(".wf-req-form-right")){
            document.querySelector(".wf-req-form-left").addEventListener("mouseover",function(){
                document.querySelector(".wf-req-form-left .wf-req-form-left-shrink").style.display = "block";
            })
            document.querySelector(".wf-req-form-right").addEventListener("mouseover",function(){
                document.querySelector(".wf-req-form-right .wf-req-form-right-shrink").style.display = "block";
            })
            document.querySelector(".wf-req-form-left").addEventListener("mouseout",function(){
               if(this.style.width != "100%")
                    document.querySelector(".wf-req-form-left .wf-req-form-left-shrink").style.display = "none";
            })
            document.querySelector(".wf-req-form-right").addEventListener("mouseout",function(){
               if(this.style.width != "100%")
                    document.querySelector(".wf-req-form-right .wf-req-form-right-shrink").style.display = "none";
            })
        }
    }
}